<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>营销活动分析</title>
  <!-- 引入Element Plus的CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.6/dist/index.css" />
  <!-- 引入图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css">
  <!-- 引入echarts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  <style>
    :root {
      --primary-color: #3a36db;
      --secondary-color: #00c9ff;
      --accent-color: #00ffb3;
      --dark-bg: #0a0b1a;
      --card-bg: #13142a;
      --text-color: #e0e0ff;
      --border-color: #2a2a57;
      --hover-color: #2d2d69;
      --gradient-primary: linear-gradient(135deg, #3a36db, #00c9ff);
      --gradient-secondary: linear-gradient(135deg, #00c9ff, #00ffb3);
      --box-shadow: 0 8px 32px rgba(0, 201, 255, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: var(--dark-bg);
      color: var(--text-color);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: var(--card-bg);
      padding: 0.8rem 2rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      background: var(--gradient-primary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
    }

    .logo-text {
      font-size: 1.2rem;
      font-weight: 600;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav-items {
      display: flex;
      gap: 2.5rem;
    }

    .nav-item {
      list-style: none;
      position: relative;
    }

    .nav-link {
      color: var(--text-color);
      text-decoration: none;
      font-size: 1rem;
      font-weight: 500;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
    }

    .nav-link.active {
      color: var(--secondary-color);
      font-weight: 600;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--gradient-secondary);
      border-radius: 3px;
    }

    .nav-link:hover {
      color: var(--secondary-color);
    }

    .user-profile {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-bg);
      font-weight: bold;
    }

    /* 内容区域样式 */
    .container {
      padding: 2rem;
      max-width: 1600px;
      margin: 0 auto;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .title {
      font-size: 1.8rem;
      font-weight: 700;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .refresh-btn {
      background: var(--gradient-primary);
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
    }

    .refresh-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(58, 54, 219, 0.4);
    }

    /* 数据卡片组 */
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .stat-card {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 201, 255, 0.15);
      border-color: var(--secondary-color);
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle at top right, rgba(0, 201, 255, 0.1), transparent 70%);
      border-radius: 50%;
    }

    .stat-icon {
      font-size: 1.5rem;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      margin-bottom: 1rem;
      background: rgba(58, 54, 219, 0.1);
      color: var(--secondary-color);
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      background: var(--gradient-secondary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .stat-label {
      font-size: 1rem;
      color: rgba(224, 224, 255, 0.8);
    }

    .stat-change {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .positive {
      color: var(--accent-color);
    }

    .negative {
      color: #ff6b6b;
    }

    /* 图表区域 */
    .charts-section {
      margin-bottom: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    
    .chart-card.full-width {
      grid-column: 1 / -1;
    }

    .chart-card {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .chart-title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .chart-container {
      height: 350px;
      width: 100%;
    }

    /* 表格区域 */
    .table-section {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .table-title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .search-box {
      position: relative;
    }

    .search-input {
      background-color: rgba(42, 42, 87, 0.4);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem 1rem 0.5rem 2.5rem;
      color: var(--text-color);
      width: 250px;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--secondary-color);
      box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(224, 224, 255, 0.6);
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    .data-table th,
    .data-table td {
      padding: 1rem;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .data-table th {
      background-color: rgba(42, 42, 87, 0.4);
      font-weight: 600;
      color: var(--secondary-color);
    }

    .data-table tbody tr {
      transition: all 0.3s ease;
    }

    .data-table tbody tr:hover {
      background-color: var(--hover-color);
    }

    .tag {
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      display: inline-block;
    }

    .tag-success {
      background-color: rgba(0, 255, 179, 0.15);
      color: var(--accent-color);
    }

    .tag-warning {
      background-color: rgba(255, 184, 0, 0.15);
      color: #ffb800;
    }

    .tag-danger {
      background-color: rgba(255, 107, 107, 0.15);
      color: #ff6b6b;
    }

    .tag-info {
      background-color: rgba(0, 201, 255, 0.15);
      color: var(--secondary-color);
    }
    
    .tag-primary {
      background-color: rgba(58, 54, 219, 0.15);
      color: var(--primary-color);
    }


    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1.5rem;
      gap: 0.5rem;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: rgba(42, 42, 87, 0.4);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .page-btn:hover {
      background-color: var(--hover-color);
      border-color: var(--secondary-color);
    }

    .page-btn.active {
      background: var(--gradient-primary);
      color: white;
      border: none;
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .stats-cards {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .charts-section {
        grid-template-columns: 1fr; /* 单列表格，让全宽图表正常显示 */
      }
    }

    @media (max-width: 768px) {
      .navbar {
        padding: 0.8rem 1rem;
        flex-direction: column;
        gap: 1rem;
      }
      
      .nav-items {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
      }
      
      .stats-cards {
        grid-template-columns: 1fr;
      }
      
      .container {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>

  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-chart-pie"></i>
      </div>
      <div class="logo-text">NEWBE工作室</div>
    </div>
    
    <ul class="nav-items">
      <li class="nav-item">
        <a href="test.html" class="nav-link">RFM客户行为分析</a>
      </li>
      <li class="nav-item">
        <a href="test2.html" class="nav-link">客户生命周期</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active">营销活动分析</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">销售预测</a>
      </li>
    </ul>
    
    <div class="user-profile">
      <div class="user-avatar">A</div>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <div class="container">
    <!-- 标题和刷新按钮 -->
    <div class="header">
      <h1 class="title">营销活动分析</h1>
      <button class="refresh-btn">
        <i class="fas fa-sync-alt"></i>
        生成分析
      </button>
    </div>
    
    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-dollar-sign"></i>
        </div>
        <div class="stat-value">¥150,000</div>
        <div class="stat-label">总投入</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-up"></i>
          5.2% 较上期
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-bullseye"></i>
        </div>
        <div class="stat-value">2.5M</div>
        <div class="stat-label">总触达</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-up"></i>
          15% 较上期
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users-cog"></i>
        </div>
        <div class="stat-value">12,500</div>
        <div class="stat-label">转化总数</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-up"></i>
          8.0% 较上期
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="stat-value">250%</div>
        <div class="stat-label">平均ROI</div>
        <div class="stat-change negative">
          <i class="fas fa-arrow-down"></i>
          -2.5% 较上期
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 活动效果概览 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">活动效果概览 (转化数)</h3>
        </div>
        <div class="chart-container" id="campaignPerformanceChart"></div>
      </div>
      
      <!-- 渠道表现分析 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">渠道表现分析 (转化占比)</h3>
        </div>
        <div class="chart-container" id="channelPerformanceChart"></div>
      </div>

      <!-- 营销转化漏斗 -->
      <div class="chart-card full-width">
        <div class="chart-header">
          <h3 class="chart-title">营销转化漏斗</h3>
        </div>
        <div class="chart-container" id="marketingFunnelChart"></div>
      </div>
      
      <!-- 活动成本与回报趋势 -->
      <div class="chart-card full-width">
        <div class="chart-header">
          <h3 class="chart-title">活动成本与回报趋势 (月度)</h3>
        </div>
        <div class="chart-container" id="costReturnTrendChart"></div>
      </div>
    </div>
    
    <!-- 营销活动详情表格 -->
    <div class="table-section">
      <div class="table-header">
        <h3 class="table-title">营销活动详情</h3>
        <div class="search-box">
          <i class="fas fa-search search-icon"></i>
          <input type="text" class="search-input" placeholder="搜索活动名称">
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>活动名称</th>
            <th>开始日期</th>
            <th>结束日期</th>
            <th>预算 (¥)</th>
            <th>花费 (¥)</th>
            <th>触达人数</th>
            <th>点击次数</th>
            <th>转化数</th>
            <th>CPA (¥)</th>
            <th>ROI (%)</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>双十一大促</td>
            <td>2023-11-01</td>
            <td>2023-11-11</td>
            <td>50,000</td>
            <td>48,500</td>
            <td>1.2M</td>
            <td>85,000</td>
            <td>5,200</td>
            <td>9.33</td>
            <td>320%</td>
            <td><span class="tag tag-success">已完成</span></td>
          </tr>
          <tr>
            <td>新品上市推广</td>
            <td>2023-10-15</td>
            <td>2023-11-15</td>
            <td>30,000</td>
            <td>25,000</td>
            <td>800K</td>
            <td>40,000</td>
            <td>3,100</td>
            <td>8.06</td>
            <td>280%</td>
            <td><span class="tag tag-success">已完成</span></td>
          </tr>
          <tr>
            <td>年中大促预热</td>
            <td>2024-05-20</td>
            <td>2024-06-18</td>
            <td>80,000</td>
            <td>75,000</td>
            <td>2.0M</td>
            <td>150,000</td>
            <td>8,500</td>
            <td>8.82</td>
            <td>450%</td>
            <td><span class="tag tag-primary">进行中</span></td>
          </tr>
          <tr>
            <td>圣诞节特别活动</td>
            <td>2023-12-10</td>
            <td>2023-12-25</td>
            <td>20,000</td>
            <td>18,000</td>
            <td>500K</td>
            <td>25,000</td>
            <td>1,500</td>
            <td>12.00</td>
            <td>180%</td>
            <td><span class="tag tag-success">已完成</span></td>
          </tr>
           <tr>
            <td>春季焕新活动</td>
            <td>2024-03-01</td>
            <td>2024-03-31</td>
            <td>35,000</td>
            <td>33,000</td>
            <td>950K</td>
            <td>60,000</td>
            <td>3,800</td>
            <td>8.68</td>
            <td>310%</td>
            <td><span class="tag tag-warning">计划中</span></td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <button class="page-btn"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 活动效果概览图表
      const campaignPerformanceChart = echarts.init(document.getElementById('campaignPerformanceChart'));
      const campaignPerformanceOption = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { 
          type: 'category', 
          data: ['双十一大促', '新品上市', '年中预热', '圣诞活动', '春季焕新'],
          axisLabel: { color: '#e0e0ff' },
          axisLine: { lineStyle: { color: '#2a2a57' } }
        },
        yAxis: { 
          type: 'value', 
          name: '转化数',
          axisLabel: { color: '#e0e0ff' },
          axisLine: { lineStyle: { color: '#2a2a57' } },
          splitLine: { lineStyle: { color: 'rgba(42, 42, 87, 0.4)' } }
        },
        series: [{
          name: '转化数',
          type: 'bar',
          data: [5200, 3100, 8500, 1500, 3800],
          itemStyle: { color: 'var(--secondary-color)' },
          barWidth: '40%'
        }]
      };
      campaignPerformanceChart.setOption(campaignPerformanceOption);

      // 渠道表现分析图表
      const channelPerformanceChart = echarts.init(document.getElementById('channelPerformanceChart'));
      const channelPerformanceOption = {
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
        legend: { 
          orient: 'vertical', 
          right: 10, top: 'center', 
          data: ['社交媒体', '搜索引擎', '邮件营销', '内容营销', '合作伙伴'],
          textStyle: { color: '#e0e0ff' }
        },
        series: [{
          name: '渠道占比',
          type: 'pie',
          radius: ['45%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: { borderRadius: 10, borderColor: '#13142a', borderWidth: 2 },
          label: { show: false, position: 'center' },
          emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
          data: [
            { value: 335, name: '社交媒体', itemStyle: { color: '#3a36db'} },
            { value: 310, name: '搜索引擎', itemStyle: { color: '#00c9ff'} },
            { value: 234, name: '邮件营销', itemStyle: { color: '#00ffb3'} },
            { value: 135, name: '内容营销', itemStyle: { color: '#ffb800'} },
            { value: 154, name: '合作伙伴', itemStyle: { color: '#ff6b6b'} }
          ]
        }]
      };
      channelPerformanceChart.setOption(channelPerformanceOption);

      // 营销转化漏斗图表
      const marketingFunnelChart = echarts.init(document.getElementById('marketingFunnelChart'));
      const marketingFunnelOption = {
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
        color: ['#3a36db', '#5653ea', '#00c9ff', '#00ffb3', '#ffb800'],
        series: [{
          name: '营销漏斗',
          type: 'funnel',
          left: '10%', top: 60, bottom: 60, width: '80%',
          minSize: '0%', maxSize: '100%',
          sort: 'descending', gap: 2,
          label: { show: true, position: 'inside', color: '#fff' },
          itemStyle: { borderColor: '#13142a', borderWidth: 1 },
          data: [
            { value: 100000, name: '触达 (100k)' },
            { value: 60000, name: '互动 (60k)' },
            { value: 30000, name: '潜在客户 (30k)' },
            { value: 15000, name: '意向客户 (15k)' },
            { value: 5000, name: '成交 (5k)' }
          ]
        }]
      };
      marketingFunnelChart.setOption(marketingFunnelOption);
      
      // 活动成本与回报趋势图表
      const costReturnTrendChart = echarts.init(document.getElementById('costReturnTrendChart'));
      const costReturnTrendOption = {
        tooltip: { trigger: 'axis' },
        legend: { 
            data: ['总花费', '总回报'],
            textStyle: { color: '#e0e0ff' } 
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: { color: '#e0e0ff' },
          axisLine: { lineStyle: { color: '#2a2a57' } }
        },
        yAxis: {
          type: 'value',
          name: '金额 (¥)',
          axisLabel: { color: '#e0e0ff', formatter: '¥{value}' },
          axisLine: { lineStyle: { color: '#2a2a57' } },
          splitLine: { lineStyle: { color: 'rgba(42, 42, 87, 0.4)' } }
        },
        series: [
          {
            name: '总花费',
            type: 'line',
            data: [12000, 15000, 13000, 18000, 22000, 20000],
            itemStyle: { color: '#ff6b6b' },
            smooth: true
          },
          {
            name: '总回报',
            type: 'line',
            data: [30000, 38000, 35000, 50000, 60000, 55000],
            itemStyle: { color: '#00ffb3' },
            smooth: true
          }
        ]
      };
      costReturnTrendChart.setOption(costReturnTrendOption);

      window.addEventListener('resize', function() {
        campaignPerformanceChart.resize();
        channelPerformanceChart.resize();
        marketingFunnelChart.resize();
        costReturnTrendChart.resize();
      });
    });
  </script>
</body>
</html>
